<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="../vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>

	<body>
		<div id="app">
			<div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
				{{ item }}
			</div>
		</div>
		
	</body>
	<script>
		
		/*
		toRef：创建一个ref对象，其value值指向另一个对象中的某个属性
		toRef语法：const name = toRef(object , 'property')
		toRefs：功能与toRef一致，但可以批量创建多个ref对象
		toRefs语法：toRefs(object)
		*/
		const vm = Vue.createApp({
		    setup(){
		        const {ref, reactive ,onBeforeUpdate, onMounted, toRef} = Vue;
		        const list = reactive([1, 2, 3])
		        const divs = ref([])
		        
		        // 确保在每次更新之前重置ref
		        onBeforeUpdate(() => {
		        	divs.value = []
		        })
				
				onMounted(() => {
					console.log("divs = ",divs)
				})
		        
		        return {
		        	list,
		        	divs
		        }
			},
			
			methods: {
				btnTap(){
					
				}
			}
		}).mount('#app');
	</script>

</html>
